<template>
  <div>
    <div class="audio-container" :class="isShow ? 'isdetaile' : ''">
      <div v-if="!audioInfo.id" class="no-click"></div>
      <!-- 音乐播放器 https://music.163.com/song/media/outer/url?id=1489085422.mp3 
    audioUrl || 'https://music.163.com/song/media/outer/url?id=' + audioInfo.id + '.mp3'
    -->
      <audio :src="audioUrl || 'https://music.163.com/song/media/outer/url?id=' + audioInfo.id + '.mp3'" class="audio"
        ref="audio" @timeupdate="timeUpdate"></audio>
      <!-- 歌曲信息展示区域 -->
      <div class="songInfo-box" ref="songInfo" :style="{ top: isShow == true ? 0 : '-100%' }">
        <!-- 展开歌词面板显示区域 -->
        <div class="songInfo-btns">
          <div class="down" @click="hiddeSongText"><i class="el-icon-arrow-down"></i></div>
          <div class="btns"><span class="iconfont icon-xihuan"></span></div>
          <div class="btns"><span class="el-icon-folder-add"></span></div>
          <div class="btns" @click="downLoadMusic"><i class="iconfont icon-xiazai"></i></div>
          <div class="btns"><span class="el-icon-share"></span></div>
        </div>
        <!-- 未展开歌词面板显示区域 -->
        <div class="songInfo-content">
          <!-- 歌曲图片 -->
          <div class="song-img" @click="showSongText">
            <img :src="picUrl">
            <div class="mask"><i class="el-icon-arrow-up"></i></div>
          </div>
          <!-- 歌曲名称  -->
          <div class="song-title">
            <h3><span class="musicName" v-html="audioInfo.name"></span><span class="musicAlia"
                v-if="audioInfo.alia && audioInfo.alia.length > 0" v-html="audioInfo.alia[0]"></span></h3>
            <span>{{ arNmae }}</span>
          </div>
          <!-- 爱心图标 -->
          <span class="iconfont icon-xihuan"></span>
        </div>
      </div>
      <!-- 播放控件区域 -->
      <div class="control-box">
        <div class="control-btns">
          <!-- 控制播放顺序区域 -->
          <div class="order">
            <div v-show="isClick" class="order-tips">{{ tips }}</div>
            <span @click="changeOrder1" v-show="active == 1" class="active iconfont icon-shunxubofang"></span>
            <span @click="changeOrder2" v-show="active == 2" class="active iconfont icon-liebiaoxunhuan"></span>
            <span @click="changeOrder3" v-show="active == 3" class="active iconfont icon-danquxunhuan"></span>
            <span @click="changeOrder4" v-show="active == 4" class="active iconfont icon-ziyuan"></span>
          </div>
          <!-- 上一首下一首播放暂停区域 -->
          <div class="control-center">
            <span class="iconfont icon-shangyishouweidianji" @click="changeLastSong"></span>
            <div class="play"><span v-if="isShowPlay" class="iconfont icon-bofangzanting-"
                @click="playMusic"></span><span v-else class="iconfont icon-bofang-zanting-" @click="pauseMusic"></span>
            </div>
            <span class="iconfont icon-xiayishouweidianji" @click="changeNextSong"></span>
          </div>
          <!-- 音量图标 -->
          <div class="sound">
            <span v-show="!isMuted" class="iconfont icon-yinliang" @click="soundMuted"></span>
            <span v-show="isMuted" class="iconfont icon-24gl-volumeCross" @click="soundNoMuted"></span>
            <div class="sound-slider">
              <el-slider v-model="soundValue" :min="0" :max="100" :show-tooltip="false" @input="soundSliderChange"
                @mousedown.native="SoundMouseDown"></el-slider>
            </div>
          </div>
        </div>
        <!-- 进度条 -->
        <div class="block">
          <span>{{ currentTime > audioInfo.dt ? audioInfo.dt : currentTime || '00:00' }}</span>
          <el-slider v-model="value" :min="0" :max="100" :show-tooltip="false" @change="sliderChange"
            @input="inputChange" @mousedown.native="mouseDown"></el-slider>
          <span>{{ audioInfo.dt || '00:00' }}</span>
        </div>
      </div>
      <!-- 右侧区域 -->
      <div class="right-box">
        <span :class="{ 'iconfont': 1, 'icon-gedan': 1, 'select': isList }" @click="changIsList"></span>
      </div>
      <!-- 右侧展示播放列表区域 -->
      <SongList ref="list" :isList="isList" :nowId="audioInfo.id" :active="active" @updateIsList="updateisList"
        @getSongLyric="updateSongLyric" :isShow="isShow"></SongList>
    </div>
    <!-- 弹出框展示歌曲详情信息区域 -->
    <SongDetail :isShow="isShow" :audioInfo="audioInfo" :deg="deg" :currentTime="currentTime" :flag="flag"
      ref="songDtail" @closeView="hiddeSongText" @dblclickTxt="updateCurrentTime">
    </SongDetail>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import SongDetail from '@/components/Audio/SongDetail/SongDetail.vue'
import SongList from '@/components/Audio/SongList/SongList.vue'
import axios from '@/request/request'
export default {
  data() {
    return {
      // 进度条参数
      value: 0,
      // 控制播放暂停按钮的显示与隐藏
      isShowPlay: true,
      currentTime: '',
      flag: true,
      // 控制是否静音
      isMuted: false,
      // 控制音量进度条参数
      soundValue: 50,
      volume: 0,
      oldValue: 0,
      active: 1,
      // 控制是否显示歌词详情面板
      isShow: false,
      deg: 0,
      // 控制是否展示右侧播放列表
      isList: false,
      isClick: false,
      tips: ''
    }
  },
  components: {
    SongDetail,
    SongList
  },
  mounted() {
    this.$refs.audio.volume = 0.4
    window.addEventListener('keyup', e => {
      if (e.code == 'ArrowLeft' && this.audioInfo) {
        this.$refs.audio.currentTime -= 10
      } else if (e.code == 'ArrowRight' && this.audioInfo) {
        this.$refs.audio.currentTime += 10
      } else if (e.code == 'Space') {
        this.isShowPlay ? this.playMusic() : this.pauseMusic()
      }
    })
    document.body.onkeydown = function (e) {
      if (e.code == 'Space') {
        e.preventDefault();
      }
    }
  },
  methods: {
    // 更新歌词和评论信息
    updateSongLyric(id) {
      this.$refs.songDtail.openSongView(id, true)
      this.$refs.songDtail.getSongComments(id, true)
    },
    routerAndClose() {
      this.isShow = false
    },
    updateisList(drawer) {
      this.isList = drawer
    },
    changIsList() {
      if (this.isList) {
        this.isList = false
      } else {
        this.isList = true
      }
    },
    updateCurrentTime(time) {
      const timeArr = time.split(':')
      this.$refs.audio.currentTime = timeArr[0] * 60 + Number(timeArr[1])
      this.playMusic()
    },
    // 点击显示歌词面板
    showSongText() {
      this.isShow = true
    },
    // 隐藏歌词面板
    hiddeSongText() {
      this.isShow = false
    },
    // 播放音乐
    playMusic() {
      this.isShowPlay = false
      this.$refs.audio.play()
      this.deg = 37
    },
    // 暂停播放
    pauseMusic() {
      this.isShowPlay = true
      this.$refs.audio.pause()
      this.deg = 0
    },
    // 滑块值发生改变时触发，松开鼠标时触发
    sliderChange(value) {
      const currentTime = ((value / 100) * this.$refs.audio.duration || 0).toFixed(0)
      this.$refs.audio.currentTime = currentTime
      this.flag = true
      this.playMusic()
      this.mouseUp()
    },
    // 滑块滑动实时触发
    inputChange(value) {
      if (this.flag) return
      const currentTime = ((value / 100) * this.$refs.audio.duration || 0).toFixed(0)
      this.currentTime = this.format(currentTime)
    },
    // 音乐播放器实时时间事件
    timeUpdate() {
      if (!this.flag) return
      if (this.$refs.audio.ended && this.playListLength > 0) {
        this.changeNextSong()
      } else if (this.$refs.audio.ended) {
        this.pauseMusic()
      }
      const time = Math.floor(this.$refs.audio.currentTime || 0)
      this.currentTime = this.format(time)
      this.value = +(((this.$refs.audio.currentTime || 0) / this.$refs.audio.duration || 0) * 100).toFixed(0)
    },
    // 进度条鼠标按下事件
    mouseDown() {
      this.flag = false
    },
    mouseUp() {
      this.flag = true
      const up = true
      this.$refs.songDtail.scrollUl(up)
    },
    // 格式化歌曲毫秒数
    format(dt) {
      if (!dt) return '00:00'
      let m = parseInt(dt / 60)
      let s = (dt % 60).toFixed(0)
      if (m < 10) {
        m = '0' + m
      }
      if (s < 10) {
        s = '0' + s
      }
      return m + ':' + s
    },
    // 点击音量图标，设置静音
    soundMuted() {
      this.volume = this.$refs.audio.volume
      this.oldValue = this.soundValue
      this.$refs.audio.muted = true
      this.$refs.audio.volume = 0
      this.soundValue = 0
      this.isMuted = true
    },
    // 点击静音图标，取消静音
    soundNoMuted() {
      this.$refs.audio.muted = false
      this.isMuted = false
      this.$refs.audio.volume = this.volume
      this.soundValue = this.oldValue
    },
    // 设置音量大小
    soundSliderChange(value) {
      if (value > 0) {
        this.$refs.audio.muted = false
        this.isMuted = false
      } else if (value == 0) {
        this.$refs.audio.muted = true
        this.isMuted = true
      }
      const sound = (value / 100).toFixed(2)
      this.$refs.audio.volume = sound
    },
    // 音量滑块鼠标按下事件
    SoundMouseDown() {
      this.volume = this.$refs.audio.volume
      this.oldValue = this.soundValue
    },
    // 按顺序播放图标点击事件
    changeOrder1() {
      this.active = 2
      this.$refs.audio.loop = false
      this.tips = '列表循环'
      this.isClick = true
      setTimeout(() => {
        this.isClick = false
      }, 1000)
    },
    // 按列表循环播放图标点击事件
    changeOrder2() {
      this.active = 3
      this.$refs.audio.loop = true
      this.tips = '单曲循环'
      this.isClick = true
      setTimeout(() => {
        this.isClick = false
      }, 1000)
    },
    // 按单曲循环图标点击事件
    changeOrder3() {
      this.active = 4
      this.$refs.audio.loop = false
      this.tips = '随机播放'
      this.isClick = true
      setTimeout(() => {
        this.isClick = false
      }, 1000)
    },
    // 按随机播放点击事件
    changeOrder4() {
      this.active = 1
      this.$refs.audio.loop = false
      this.tips = '顺序播放'
      this.isClick = true
      setTimeout(() => {
        this.isClick = false
      }, 1000)
    },
    // 切换上一首播放
    changeLastSong() {
      this.$refs.list.changeLast()
    },
    // 切换下一首播放
    changeNextSong() {
      this.$refs.list.changeNext()
    },
    // 下载当前音乐
    async downLoadMusic() {
      const { data: res } = await axios.get(`/song/download/url?id=${this.audioInfo.id}`)
      if (res.code == 200) {
        this.$download(res)
      }
    }
  },
  computed: {
    ...mapState('audio', ['audioUrl', 'audioInfo']),
    ...mapGetters('audio', ['playListLength']),
    picUrl() {
      const al = this.audioInfo.al || {}
      return al.picUrl || ''
    },
    arNmae() {
      const ar = this.audioInfo.ar || []
      const arnmae = ar[0] || {}
      return arnmae.name || ''
    }
  },
  watch: {
    audioUrl() {
      this.$nextTick(() => {
        this.playMusic()
      })
    },
    $route() {
      this.isShow = false
    }
  }
}
</script>

<style lang="less" scoped>
.audio-container {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  position: fixed;
  box-sizing: border-box;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 9%;
  z-index: 2001;
  padding: 0 20px;
  overflow: hidden;
  background: linear-gradient(360deg, rgba(191, 245, 235, 0.8), rgba(255, 255, 255, 0.8));
  border-top: 2px solid #963acf;

  .no-click {
    z-index: 2002;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(230, 230, 230, 0.7);
  }

  &.isdetaile {
    background: transparent;
    border-top: none;
  }

  .audio {
    display: none;
  }

  // 歌曲信息展示区域
  .songInfo-box {
    position: absolute;
    left: 5%;
    top: -100%;
    width: 25%;
    height: 200%;
    transition: all 0.5s;

    .songInfo-btns {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      height: 50%;

      .down {
        width: 3vw;
        height: 3vw;
        text-align: center;

        .el-icon-arrow-down {
          font-size: 1.81vw;
          line-height: 3vw;
        }
      }

      .btns {
        width: 3vw;
        height: 3vw;
        border-radius: 50%;
        border: 1px solid rgb(219, 219, 219);
        text-align: center;
        line-height: 3vw;
        font-size: 1.8vw;
        font-weight: 400;

        &:hover {
          background-color: rgb(242, 242, 242);
        }

        .icon-xihuan,
        .icon-xiazai {
          font-size: 1.8vw;
          // font-weight: 700;
        }
      }
    }

    .songInfo-content {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      height: 50%;

      .song-img {
        position: relative;
        width: 3.5vw;
        height: 3.5vw;
        border-radius: 4px;
        overflow: hidden;

        &:hover .mask {
          opacity: 0.5;
        }

        img {
          width: 100%;
          height: 100%;
        }

        .mask {
          position: absolute;
          top: 0;
          left: 0;
          text-align: center;
          width: 100%;
          height: 100%;
          background-color: #000;
          opacity: 0;
          z-index: 99;

          .el-icon-arrow-up {
            color: white;
            font-size: 1.75vw;
            line-height: 3.5vw;
          }
        }
      }

      .song-title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        width: 60%;
        height: 60%;
        margin-left: 3%;
        overflow: hidden;
        white-space: nowrap;

        h3 {
          display: flex;
          align-items: center;
          width: 100%;
          font-weight: 400;
          font-size: 0.88vw;
          margin: 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          .musicName {
            font-size: 0.88vw;
            color: rgb(19, 19, 19);

            /deep/ i {
              font-size: 0.88vw;
              color: rgb(19, 19, 19) !important;
            }
          }

          .musicAlia {
            // display: inline-block;
            font-size: 0.88vw;
            color: rgb(186, 186, 186);
            margin-left: 0.3vw;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            /deep/ i {
              color: rgb(186, 186, 186) !important;
            }
          }
        }

        span {
          font-size: 0.8vw;
        }
      }

      .icon-xihuan {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        font-size: 1.8vw;
      }
    }
  }

  // 播放控件区域
  .control-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    // padding-top: 10px;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 40%;
    height: 100%;

    // background-color: rgb(76, 132, 188);
    .iconfont {
      font-size: 1.8vw;

      &:hover {
        color: rgb(150, 58, 207);
      }
    }

    .control-btns {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 70%;
      height: 60%;
      margin-top: 10px;

      .order {
        position: relative;
        display: flex;
        align-items: center;
        width: 25%;
        height: 100%;

        .order-tips {
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          width: 70%;
          height: 60%;
          border-radius: 13px;
          background-color: rgba(0, 0, 0, 0.6);
          color: white;
          font-size: 13px;
          text-align: center;
          transition: all 0.5s;
        }

        span.active {
          color: rgb(150, 58, 207);
          font-weight: 700;
        }

        span {
          position: absolute;
          top: 50%;
          right: 0;
          height: 25px;
          transform: translateY(-50%);
          line-height: 25px;
        }

        .icon-shunxubofang {
          font-size: 1.1vw !important;
        }

        .icon-ziyuan {
          font-size: 1.1vw !important;
          height: 25px;
          line-height: 25px;
        }

        .icon-danquxunhuan {
          font-size: 1.5vw !important;
        }

        .icon-liebiaoxunhuan {
          font-size: 1.5vw !important;
        }
      }

      .control-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 30%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .icon-shangyishouweidianji,
        .icon-xiayishouweidianji {
          font-size: 1vw;
        }

        .play {
          width: 2.3vw;
          height: 2.3vw;
          border-radius: 50%;
          text-align: center;
          line-height: 2.28vw;
          background-color: rgb(239, 239, 239);

          &:hover {
            background-color: rgb(220, 218, 218);
          }

          span {
            display: inline-block;
            width: 2.3vw;
            height: 2.3vw;
            border-radius: 50%;
          }

          .icon-bofangzanting- {
            font-size: 1.8vw;
          }

          .icon-bofang-zanting- {
            font-size: 1.5vw;
          }
        }
      }

      .sound {
        display: flex;
        align-items: center;
        position: relative;
        top: 1px;
        width: 25%;
        text-align: start;

        &:hover .sound-slider {
          display: block;
        }

        .icon-yinliang {
          // float: left;
          font-weight: 700;
          font-size: 1.4vw;
        }

        .icon-24gl-volumeCross {
          // float: left;
          font-weight: 700;
          font-size: 1.4vw;
        }

        .sound-slider {
          // float: left;
          width: 75%;
          margin-left: 0.6vw;
          display: none;
          // position: absolute;
          // top: 50%;
          // right: 0;
          // transform: translateY(-50%);

          /deep/ .el-slider {
            width: 100%;
          }

          /deep/ .el-slider__runway {
            height: 6px;
          }

          /deep/ .el-slider__bar {
            height: 6px;
            background-color: rgb(150, 58, 207);
          }

          /deep/ .el-slider__button {
            width: 10px;
            height: 10px;
            border: none;
            background-color: rgb(150, 58, 207);
          }

        }
      }
    }

    .block {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 80%;
      height: 40%;

      span {
        font-size: 12px;
      }

      /deep/ .el-slider {
        width: 88%;

        &:hover .el-slider__button {
          display: inline-block;
        }
      }

      /deep/ .el-slider__runway {
        height: 6px;
      }

      /deep/ .el-slider__bar {
        height: 6px;
        background-color: rgb(150, 58, 207);
      }

      /deep/ .el-slider__button {
        display: none;
        width: 10px;
        height: 10px;
        border: none;
        background-color: rgb(150, 58, 207);
      }
    }
  }

  // 右侧区域
  .right-box {
    position: absolute;
    right: 20px;
    top: 0;
    box-sizing: border-box;
    width: 25%;
    height: 100%;
    padding: 5px;

    // background-color: hotpink;
    .icon-gedan {
      cursor: pointer;
      position: absolute;
      top: 50%;
      right: 10%;
      transform: translateY(-50%);
      font-size: 2.5vw;

      &:hover {
        font-weight: 700;
        color: rgb(109, 48, 195);
      }

      &.select {
        font-weight: 700;
        color: rgb(109, 48, 195);
      }
    }
  }
}
</style>